<template>
  <div class="app-container" style="padding: 5px;">
    <el-row>
      <el-col :span="6">
        <el-card>
          <div ref="chart1" style="width: 100%; height: 500px;"></div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card style="margin-left: 5px;">
          <div ref="chart2" style="width: 100%; height: 500px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-card style="margin-top: 5px;">
          <div ref="chart3" style="width: 100%; height: 500px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="margin-top: 5px;margin-left: 5px;">
          <div ref="chart4" style="width: 100%; height: 500px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="margin-top: 5px;margin-left: 5px;">
          <div ref="chart5" style="width: 100%; height: 500px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top: 5px;">
        <el-table :data="cusList" border stripe>
            <el-table-column label="周" align="center" prop="wk_year" width="250" />
            <el-table-column label="所属周期" align="center" prop="sh_type"/>
            <el-table-column label="所属片区" align="center" prop="area"/>
            <el-table-column label="种苗品种" align="center" prop="zmpz"/>

            <el-table-column label="问题描述" align="center">
                <el-table-column label="不长" align="center" prop="bc">
                    <template slot-scope="scope">
                        <span v-if="scope.row.bc=='0'"></span>
                        <span v-if="scope.row.bc=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="服务" align="center" prop="fw">
                    <template slot-scope="scope">
                        <span v-if="scope.row.fw=='0'"></span>
                        <span v-if="scope.row.fw=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="根系不好" align="center" prop="gxbh">
                    <template slot-scope="scope">
                        <span v-if="scope.row.gxbh=='0'"></span>
                        <span v-if="scope.row.gxbh=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="黄叶" align="center" prop="hy">
                    <template slot-scope="scope">
                        <span v-if="scope.row.hy=='0'"></span>
                        <span v-if="scope.row.hy=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="货版不对" align="center" prop="hbbd">
                    <template slot-scope="scope">
                        <span v-if="scope.row.hbbd=='0'"></span>
                        <span v-if="scope.row.hbbd=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="苗大" align="center" prop="md">
                    <template slot-scope="scope">
                        <span v-if="scope.row.md=='0'"></span>
                        <span v-if="scope.row.md=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="苗弱" align="center" prop="mr">
                    <template slot-scope="scope">
                        <span v-if="scope.row.mr=='0'"></span>
                        <span v-if="scope.row.mr=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="苗小" align="center" prop="mx">
                    <template slot-scope="scope">
                        <span v-if="scope.row.mx=='0'"></span>
                        <span v-if="scope.row.mx=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="难拔苗" align="center" prop="nbm">
                    <template slot-scope="scope">
                        <span v-if="scope.row.nbm=='0'"></span>
                        <span v-if="scope.row.nbm=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="难拔起来" align="center" prop="nbql">
                    <template slot-scope="scope">
                        <span v-if="scope.row.nbql=='0'"></span>
                        <span v-if="scope.row.nbql=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="死苗" align="center" prop="sm">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sm=='0'"></span>
                        <span v-if="scope.row.sm=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="提前上花" align="center" prop="tqsh">
                    <template slot-scope="scope">
                        <span v-if="scope.row.tqsh=='0'"></span>
                        <span v-if="scope.row.tqsh=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="土球散" align="center" prop="tqs">
                    <template slot-scope="scope">
                        <span v-if="scope.row.tqs=='0'"></span>
                        <span v-if="scope.row.tqs=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="异常" align="center" prop="yc">
                    <template slot-scope="scope">
                        <span v-if="scope.row.yc=='0'"></span>
                        <span v-if="scope.row.yc=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
                <el-table-column label="其他" align="center" prop="qt">
                    <template slot-scope="scope">
                        <span v-if="scope.row.qt=='0'"></span>
                        <span v-if="scope.row.qt=='1'"><el-button type="danger" circle></el-button></span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
import { listAreaSummary,listShzsSummary,listShwtSummary,listShcpSummary,listShlxSummary,listCusService } from "@/api/system/dashboard/shdashboard";
import * as echarts from 'echarts';

export default {
  name: "Shdash",
  data() {
    return {
      cusList: [],
      queryParams: {
        area: null,
        wkYear: null,
      }
    }
  },
  created() {
    this.getList();
  },
  mounted(){
    this.initAreaChart();
    this.initShzsChart();
    this.initShwtChart();
    this.initShcpChart();
    this.initShlxChart();
  },
  methods: {
    getList(){
      listCusService(this.queryParams).then(res =>{
        this.cusList = res.data;
      })
    },
    initShlxChart(){
      listShlxSummary(this.queryParams).then(res =>{
        const chart = echarts.init(this.$refs.chart5);
        const option = {
          title: {
              text: '售后类型',
              left: 'left'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          series: [
            {
              name: '售后类型',
              type: 'pie',
              radius: '60%',
              data: res.data.datas,
              itemStyle: {
                color: function(params) {
                  // 颜色数组
                  const colorList = res.data.colors;
                  // 根据数据索引返回对应颜色
                  return colorList[params.dataIndex % colorList.length];
                }
              }
            }
          ]
        };
        chart.setOption(option);
      })
    },
    initShcpChart(){
        listShcpSummary(this.queryParams).then(res =>{
            const chart = echarts.init(this.$refs.chart4);
            const option = {
                title: {
                    text: '售后产品数量',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '售后产品数量',
                        type: 'pie',
                        radius: '60%',
                        data: res.data.datas,
                        itemStyle: {
                            color: function(params) {
                                // 颜色数组
                                const colorList = res.data.colors;
                                // 根据数据索引返回对应颜色
                                return colorList[params.dataIndex % colorList.length];
                            }
                        }
                    }
                ]
            };
            chart.setOption(option);
        })
    },
    initShwtChart(){
        listShwtSummary(this.queryParams).then(res =>{
            const chart = echarts.init(this.$refs.chart3);
            const option = {
                title: {
                    text: '售后问题类型',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '售后问题类型',
                        type: 'pie',
                        radius: '60%',
                        data: res.data.datas,
                        itemStyle: {
                            color: function(params) {
                                // 颜色数组
                                const colorList = res.data.colors;
                                // 根据数据索引返回对应颜色
                                return colorList[params.dataIndex % colorList.length];
                            }
                        }
                    }
                ]
            };
            chart.setOption(option);
        })
    },
    initShzsChart(){
      listShzsSummary(this.queryParams).then(res =>{
        const chart = echarts.init(this.$refs.chart2);
        const that = this
        const option = {
          title: {
            text: '售后总数',
            left: 'left',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            height: '60%' // 设置内部图形的高度为容器高度的 70%
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: res.data.labels,
            axisLabel: {
              rotate: 45, // 设置 X 轴文字旋转角度
              interval: 0, // 强制显示所有标签
              fontSize: 12, // 文字大小
              color: '#333' // 文字颜色
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: res.data.datas,
              type: 'line',
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}' // 标签内容格式化为数据值
              },
              symbol: 'circle',
              symbolSize: 10,                // 1) 点大小
              itemStyle: {
                color: '#5470c6',            // 2) 点颜色（正常状态）
                borderColor: 'red', // 需要边框再开
                borderWidth: 2
              },
            }
          ]
        };
        chart.setOption(option);
        chart.on('click', function(params) {
          if (params.componentType === 'series') {
            that.queryParams.wkYear = params.name;
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: [0]
            });

            // 高亮选中的柱子
            chart.dispatchAction({
              type: 'highlight',
              seriesIndex: [0],
              dataIndex: params.dataIndex
            });

            var newData = res.data.datas.map((value, index) => {
              var item = {
                value: value,
                itemStyle: {
                  color: '#5470c6',            // 2) 点颜色（正常状态）
                  borderColor: 'red', // 需要边框再开
                  borderWidth: 2
                },
              };
              // 非选中的柱子设置透明度
              if (index !== params.dataIndex) {
                item.itemStyle.opacity = 0.3;
              }
              return item;
            });
            chart.setOption({
              series: [{
                data: newData
              }]
            });
            that.initAreaChart();

            that.initShwtChart();
            that.initShcpChart();
            that.initShlxChart();
            that.getList();
          }
        });
        chart.getZr().on('click', function(event) {
          if (!event.target) {
            that.queryParams.wkYear = null;
            var newData = res.data.datas.map((value, index) => ({
              value: value,
              itemStyle: {
                color: '#5470c6',            // 2) 点颜色（正常状态）
                borderColor: 'red', // 需要边框再开
                borderWidth: 2
              },
            }));

            chart.setOption({
              series: [{
                data: newData
              }]
            });

            // 取消所有高亮
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: [0]
            });
            that.initAreaChart();

            that.initShwtChart();
            that.initShcpChart();
            that.initShlxChart();
            that.getList();
          }
        });
      })
    },
    initAreaChart() {
      listAreaSummary(this.queryParams).then(res =>{
        const chart = echarts.init(this.$refs.chart1);
        const that = this;
        const option = {
          title: {
            text: '片区售后总数',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: res.data.labels,
          },
          series: [
            {
              type: 'bar',
              data: res.data.datas,
              itemStyle: {
                color: function(params) {
                  // 颜色数组
                  const colorList = res.data.colors;
                  // 根据数据索引返回对应颜色
                  return colorList[params.dataIndex % colorList.length];
                }
              },
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}' // 标签内容格式化为数据值
              }
            }
          ]
        };
        chart.setOption(option);
        chart.on('click', function(params) {
          if (params.componentType === 'series') {
            // 处理柱子点击事件
            console.log('点击了柱子:', params.name, '值:', params.value);
            console.log('选中的柱子:', params.dataIndex);
            that.queryParams.area = params.name;
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: [0]
            });

            // 高亮选中的柱子
            chart.dispatchAction({
              type: 'highlight',
              seriesIndex: [0],
              dataIndex: params.dataIndex
            });

            var newData = res.data.datas.map((value, index) => {
              var item = {
                value: value,
                itemStyle: {
                  color:res.data.colors[index]
                },
              };
              // 非选中的柱子设置透明度
              if (index !== params.dataIndex) {
                item.itemStyle.opacity = 0.3;
              }
              return item;
            });

            chart.setOption({
              series: [{
                data: newData
              }]
            });
            that.initShzsChart();

            that.initShwtChart();
            that.initShcpChart();
            that.initShlxChart();
            that.getList();
          }
        });
        chart.getZr().on('click', function(event) {
          if (!event.target) {
            that.queryParams.area = null;
            var newData = res.data.datas.map((value, index) => ({
              value: value,
              itemStyle: {
                color:res.data.colors[index]
              }
            }));

            chart.setOption({
              series: [{
                data: newData
              }]
            });

            // 取消所有高亮
            chart.dispatchAction({
              type: 'downplay',
              seriesIndex: [0]
            });
            that.initShzsChart();

            that.initShwtChart();
            that.initShcpChart();
            that.initShlxChart();
            that.getList();
          }
        });
      })
    },
  }
};
</script>
